<template>
  <div class="header">
    <div class="flex">
      <div class="flexShare1">
        <div class="left">
          <span>智能空战效能评估和支撑数据库</span>
        </div>
        <div class="right" @click="isClose">
          <i class="el-icon-menu"></i>
        </div>
      </div>

      <div class="flexShare2">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#09C"
        >
          <el-submenu index="1">
            <template slot="title">
                <div class="flex">
                <div class="user-img">
                  <img :src="src" alt="" />
                </div>
                <div>
                  <span class="hidden-xs">ADMIN&nbsp;角色：管理员</span>
                </div>
              </div>
            </template>
            <el-menu-item index="2-1" class="color">个人信息</el-menu-item>
            <el-menu-item index="2-2" class="color">修改密码</el-menu-item>
            <el-menu-item index="2-3" class="color">安全退出</el-menu-item>
          </el-submenu>
          <!-- <el-menu-item index="1">
            <div class="flex">
              <div class="user-img">
                <img :src="src" alt="" />
              </div>
              <div>
                <span class="hidden-xs">ADMIN&nbsp;角色：管理员</span>
              </div>
            </div>
          </el-menu-item> -->
        </el-menu>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: "./image/left.jpg",
      activeIndex: "1",
      close:true
    };
  },
  methods: {
    handleSelect() {
      console.log('收缩')
    },
    isClose(){
      this.close=!this.close
      this.$root.$emit('isclose',this.close)
    }
  },
};
</script>
<style lang="scss" scoped>
.header {
  background-color: #09c;
  color: white;
  height: 5vh;
  //   line-height: 5vh;
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 98%;
    margin: 0 auto;
    overflow: hidden;
  }
  .flexShare1 {
    display: flex;
    width: 15%;
    justify-content: space-evenly;
    align-items: center;
    .left {
      font-size: 1.1em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .right {
      cursor: pointer;
      i {
        font-size: 1.4em;
      }
    }
  }
  .flexShare2 {
    display: flex;
    align-items: center;
    width: 12%;
    .el-menu-demo {
      width: 100%;
      .el-menu-item{
        color: white;
      }
      .flex {
        display: flex;
        align-items: center;
        color: white;
        width: 100%;
        .user-img {
          width: 2em;
          height: 2em;
          line-height: 2em;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .color{
          color: white;
        }
      }
    }
  }
}
.el-menu--horizontal .el-menu .el-menu-item{
  color: white;
}
</style>